<template>
	<view class="content">
		<Header color="black" /> 
			<view class="box" v-if="cartList.length">
				<u-checkbox-group v-model="checkboxVal" @change='checkboxChange'>
					<view class="abox">
						<u-swipe-action>
							<u-swipe-action-item :options="item.options" v-for="(item, index) in cartList" :key="item.id" :threshold="50" @click="handleDelCart(item.id)">
								<view class="item">
									<u-checkbox :name="item.id" inactiveColor="#333"  size="14" activeColor="#333" ></u-checkbox>
									<view class="warp" @click="handleToDetail(item.productId)">
										<view class="img">
											<image :src="item.productPic" mode=""></image>
										</view>
										<view class="right">
											<view class="name clamp2">{{item.productName}}</view>
											<view class="productAttr">
												{{getProductAttr(item.productAttr)}}
											</view>
											<view class="bot">
												<view class="price">￥<text>{{item.price}}</text></view>
												<u-number-box :min="1" v-model="item.quantity" @change="handleUpdateCart($event,item)">
													<view slot="minus" class="minus"> <u-icon name="minus" color="#000" size="14"></u-icon></view>
													<text slot="input" class="input">{{item.quantity}}</text>
													<view slot="plus" class="plus"> <u-icon name="plus" color="#000" size="14"></u-icon> </view>
												</u-number-box>
											</view>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</u-checkbox-group>
			</view>
			<view v-else class="" style="padding-top: 100rpx;">
				<u-empty mode="car"  text="购物车为空">
				</u-empty>
			</view>
			
			<view class="pageTitle">
				<view class="line1"></view>
				<text>专属推荐</text>
				<view class="line2"></view>
			</view>
			
			<view class="goods_list"> 
				  <view class="item" v-for="item in goodsList" :key="item.id" @click="handleToDetail(item.id)">
				  	<view class="image"> 
				  		<image :src="item.pic" mode=""></image>
				  	</view>
				  	<view class="text">
				  		<view class="title clamp1">
				  			{{item.name}}
				  		</view>
				  		<view class="dec clamp1">
				  			{{item.subTitle}}
				  		</view>
				  		<view class="price">
				  			¥ {{item.price}}
				  		</view>
				  	</view>
				  </view>  
			</view>
			
			<view class="allItem" :style="'bottom:'+placeholderHeight+'px'" v-if="cartList.length">
				<view class="sbox">
					<u-checkbox-group @change="allChoose">
						<u-checkbox active-color='#333' size="16" inactiveColor="#333"  :checked="selectAll"></u-checkbox>
						<text class="allChoose">全选</text>
					</u-checkbox-group>
					<view class="delBox" v-if="editCart">
						<view class="btn" @click="handleDelete">删除</view>
					</view>
					<view class="totalP" v-else>
						<view class="left">
							合计：
							<view class="price">
								¥ <text>{{cartTotal}}</text>
							</view>
						</view>
						<view class="btn" @click="handleGoBuy">立即结算</view>
					</view>
				</view>
			</view>    
			<tabbar :index="3"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				show:false,
				cartList: [],
				placeholderHeight:0,
				goodsList:[],
				selectAll: false,
				checkboxVal: [],
				editCart: false,
				deleteShow: false,
				isLogin: false
			}
		},
		computed: {
			cartTotal() {
				let sum = 0;
				let list = this.cartList;
				if (list.length) {
					list.forEach((item) => {
						let some = this.checkboxVal.some((items) => items == item.id)
						if (some) {
							sum = sum + Number(item.price) * item.quantity
						}
					})
				}
				return sum.toFixed(2)
			}
		},
		onLoad() { 
			this.placeholderHeight = uni.getStorageSync('placeholderHeight')
			this.getRecomGoodList()
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.isLogin = true
				this.getList()
			} else {
				this.isLogin = false
			} 
		},
		methods: {
			getProductAttr(arr){
				return JSON.parse(arr).map(item=>item.value).join('_')
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`/pages/category/detail?id=${id}`
				})
			},
			loginSuccess(){
				this.isLogin = true
				this.getList()
			},
			getRecomGoodList(){
				this.$http({
					url:"/home/content",
					method:"get",
				}).then(data=>{
					this.goodsList = data.recommendProductList 
				}) 
			},
			handleToLogin(){
				uni.navigateTo({
					url:"/pages/my/login"
				})
			},
			handleGoBuy() {
				if (this.checkboxVal.length == 0) {
					uni.showToast({
						title: "请选择购买的商品",
						icon: 'none'
					})
					return
				}
				this.$http({
					url: '/order/cartGenerateConfirmOrder',
					method: 'POST',
					data: this.checkboxVal
				}).then(data => {
					const info = JSON.stringify(data)
					uni.setStorageSync('confirmOrderInfo',info)
					 this.show = false
					uni.navigateTo({
						url:`./submitOrder?cartIds=${JSON.stringify(this.checkboxVal)}`
					})
				})
			},
			handleUpdateCart(e, item) {
				if(e.value == 0){
					this.$http({
						url: '/cart/delCart',
						method: 'POST',
						data: {
							id:item.id,
						}
					}).then(() => {
						this.getList()
					})
				}else{
					this.$http({
						url: '/cart/update/attr',
						method: 'POST',
						data: {
							id: item.id,
							quantity: e.value
						}
					}).then(() => {
						this.getList()
					})
				} 
			},
			handleDelCart(id) {
				this.$http({
					url: '/cart/delete',
					method: 'get',
					data: {
						ids:id,
					}
				}).then(() => {
					this.getList()
				})
			},
			getList() {
				this.$http({
					url: '/cart/list',
					method:"get"
				}).then(data => {
					this.cartList = data
					this.cartList.forEach(item => {
						item.options = [{
							text: '删除',
							style: {
								backgroundColor: '#CF302D',
							}
						}]
					}) 
				})
			},
			//单选
			checkboxChange(e) {
				this.selectAll = false
				if (this.cartList.length == e.length) {
					this.selectAll = true
				}
				this.$forceUpdate()
			},
			getselectedCheck() {
				if (this.selectAll) {
					this.checkboxVal = []
					this.cartList.forEach((item) => {
						this.checkboxVal.push(item.id)
					});
				} else {
					this.checkboxVal = []
				}
			},
			//全选
			allChoose() {
				this.selectAll = !this.selectAll
				this.getselectedCheck()
			},
		}
	}
</script>


<style lang="scss" scoped>
	.pageTitle{
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 padding-top: 40rpx;
			 margin-bottom: 30rpx;
			 .line1{
				 width: 28rpx;
				 height: 4rpx;
				 background: linear-gradient( 270deg, #191919 0%, #FFFFFF 100%);
			 }
			 .line2{
				 width: 28rpx;
				 height: 4rpx;
				 background: linear-gradient( 270deg, #FFFFFF 0%, #191919 100%);
			 }
			 text{
				 font-weight: bold;
				 font-size: 32rpx;
				 margin: 0 20rpx;
			 }
	}
	.goods_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		padding-bottom: 150rpx;
		.item{
			width: 49%;
			margin-bottom: 20rpx;
			background: #F8F8F8;
			 margin-bottom: 22rpx;
			 padding-bottom: 32rpx;
			.image{
				width: 100%;
				height: 310rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.t{
					position: absolute;
					right: 16rpx;
					top: 16rpx;
				}
				image{
					width: 100%;
					height: 310rpx;
				}
			}
			.text{
				padding: 0 30rpx;
				padding-top: 20rpx;
				.title{
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}
				.dec{
					font-size: 24rpx;
					color: #999;
					margin-top: 8rpx;
					text-align: center;
				}
				.price{
					font-size: 28rpx;
					margin-top: 16rpx;
					text-align: center;
						font-family: 'DINPro-Medium';
					color: #333;
				}
			}
		}
	}
	.null{
		padding-bottom: 100rpx;
		.btn{
			background: #CF302D;
			color: #fff;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			border-radius: 10rpx;
			text-align: center;
			font-size: 14px;
		}
	}
	.goodsMore {
		padding-bottom: 95rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 36rpx;
				color: #333;
				display: inline-block;
				margin: 0 6rpx;
			}

			.point {
				background: #CCCCCC;
				margin: 0 20rpx;
				border-radius: 50%;

				&.x {
					width: 12rpx;
					height: 12rpx;
				}

				&.y {
					width: 18rpx;
					height: 18rpx;
				}
			}
		}
	}

	.abox {
		width: 100%;
	}

	.delBox {
		.btn {
			width: 216rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: #FD2A21;
			font-size: 32rpx;
		}
	}

	.content {
		.edit {
			font-size: 28rpx;
			box-sizing: border-box;
			color: #333;
			margin-top: 24rpx;
			text-align: right;
			margin-bottom: 24rpx;
		}

		.allItem {
			position: fixed;
			width: 100%;
			bottom: 0%;
			left: 0%;
			background: #fff;
			z-index: 999;
			box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(10,17,24,0.06);
			.sbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				box-sizing: border-box;

				.allChoose {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					margin-left: 5rpx;
				}

				.totalP {
					display: flex;
					align-items: center;

					.left {
						margin-right: 30rpx;
						display: flex;
						font-size: 28rpx;
						color: #333333;
						align-items: center;

						.price {
							font-size: 32rpx;
							color: #333;

							text {
								font-size: 32rpx;
							}
						}
					}

					.btn {
						width: 187rpx;
						height: 73rpx;
						line-height: 73rpx;
						text-align: center;
						color: #fff;
						background: #333;
						font-size: 28rpx;
						border-radius: 50rpx;
					}
				}
			}
		}

		.box {
			padding: 30rpx;
			box-sizing: border-box;

			::v-deep .u-swipe-action-item {
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.item {
				width: 100%;
				background: #F8F8F8;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.warp {
					flex: 1;
					margin-left: 10rpx;
					display: flex;

					.right {
						flex: 1;
						margin-left: 16rpx;
						flex-direction: column;
						display: flex;

						.name {
							font-size: 28rpx; 
							color: #333;
						}
						.productAttr{
							font-size: 24rpx;
							color: #666;
							margin-top: 10rpx;
						}
						.sku {
							font-size: 24rpx;
							color: #999;
							margin-top: 16rpx;
						}

						.bot {
							margin-top: auto;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.minus {
								width: 44rpx;
								height: 44rpx;
								background: rgba(247, 247, 247, 1);
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.input {
								font-size: 30rpx;
								padding: 0 30rpx;
								background: #fff;
								color: #333;
							}

							.plus {
								width: 44rpx;
								height: 44rpx;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.price {
								font-size: 30rpx;
						font-family: 'DINPro-Medium';
								color: #333;
							}
						}
					}

					.img {
						width: 180rpx;
						height: 180rpx;
						overflow: hidden; 
						image {
							display: block;
							width: 180rpx;
							height: 180rpx;
						}
					}
				}
			}
		}
	}
</style>